import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex)

const store = new Vuex.Store({
  // 定义了应用状态的数据结构，可以在这里设置默认的初始状态。
  state:{
    counter:200,
    students:[
      {id:1,name:'张三',age:24},
      {id:2,name:'李四',age:14},
      {id:3,name:'王五',age:16},
      {id:4,name:'赵六',age:22},
    ],
  },
  // 是唯一更改 store 中状态的方法，且必须是同步函数
  mutations:{
    // 默认传一个参
    increment(state){
      state.counter++
    },
    decrement(state){
      state.counter--
    },
    addCount(state,payload){
      // state.counter +=num
      state.counter +=payload.num
    },
    addStudent(state,stu){
      state.students.push(stu)
    },
    updateInfo(state){
      // Vue.set(state.students,'address','湖北武汉')
      Vue.delete(state.students,'age')
    },
  },
  // 用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
  actions:{

  },
  // 允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
  getters:{
    powerCount(state){
      return state.counter *state.counter
    },
    moreStu(state) {
      return state.students.filter(s => s.age >0)
     },
     moreStuLength(state,getters){
      return getters.moreStu.length
     },
     moreAge(state){
      //  return function(age){
      //   state.students.filter( s => s.age > age)
      //  }
      return age =>{
        state.students.filter(s => s.age >age )
      }
     },
     
  },
  // 允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。
  modules:{}
})

export default store